<template>
  <!-- mustache语法：里面可以放置表达式：能够返回一个结果的代码块 -->
  <!-- 变量、数学运算、三元表达式、函数 -->
  <h4>第一个自定义组件</h4>
  <h4>变量：{{ name }}</h4>
  <h4>函数：{{ fn(name) }}</h4>
  <h4>数学运算：{{ 5 + 5 }}</h4>
  <h4>三元表达式：我今年{{ age > 18 ? age : "未成年" }}</h4>
  <h4><button @click="c++">点击加1</button></h4>
  <h4>c:{{ c }}</h4>
  <h4><button @click="say('hi')">hello</button></h4>
  <h4><button @click="price()">回答</button></h4>
</template>
<!-- setup语法糖 -->
<script setup>
import { ref } from "vue";
const name = "xMing";
const age = 20;
const c = ref(0);
function fn(name) {
  return name + "666";
}
function say(arg) {
  return alert(arg);
}
function price(arg) {
  arg = prompt("这衣服多少钱？");
  if (arg == "" || arg == null || arg == undefined) {
    alert("不卖走了");
  } else if (arg > 100) {
    alert("太贵了");
  } else if (arg < 100) {
    alert("成交");
  }
}
</script>
<!-- scoped的作用：样式隔离 -->
<style scoped>
h4 {
  color: pink;
}
</style>
